<template>
	<view class="wrapper">
    <swiper class="swiper" circular :indicator-dots="false" :autoplay="true" :interval="3000" :duration="500">
      <swiper-item
          v-for="(item, index) in detail.image"
          :key="index"
          class="swpier-item"
      >
        <view class="image">
          <u--image lazy-load width="710rpx" height="710rpx" :fade="true" duration="450" mode="scaleToFill" :src="baseUrl + item.image.path" v-if="item.image"></u--image>
        </view>
      </swiper-item>
    </swiper>
    <!-- 防止打开sku底下滚动 -->
    <template v-if="!showPop">
      <view class="desc">
        <view class="title">{{ detail.title }}</view>
        <view class="title_sub">{{ detail.title_sub }}</view>
        <template v-if="!detail.isGroup">
          <view class="price">￥{{ detail.price }}</view>
          <view class="price_old">￥{{ detail.price_old }}</view>
        </template>
        <template v-else>
          <view class="g">
            <view class="price">￥{{ detail.price_group }}</view>
            <!--<view class="price_old">￥{{ detail.price_old }}</view>-->
            <view class="price_buy">购买价: ￥{{ (detail.price * 1).toFixed(2).toString().replace(/\.?0+$/, '') }}</view>
          </view>
        </template>
        <view class="stock">库存:{{ detail.stock }}</view>
        <view class="sell">已售: {{ detail.sell_count }}</view>
        <view class="quantityx">
          <view class="titlex">选择数量:</view>
          <view class="sub" @click="decrement">-</view>
          <view class="num" @click="change">{{ quantity }}</view>
          <view class="add" @click="increment">+</view>
        </view>
      </view>
      <!-- group -->
      <view class="group" v-if="detail.isGroup && groupList.length > 0">
        <view class="title">
          <text>正在进行的团</text>
        </view>
        <!--<view class="btn">-->
        <!--  <view class="item"><u-button :custom-style="{ 'width': '80px', 'height': '30px' }" text="发起拼团" :color="'red'" @click="handleCreateGroup"></u-button></view>-->
        <!--  <view class="item"><u-button :custom-style="{ 'width': '80px', 'height': '30px' }" text="随机拼团" :color="'red'" @click="handleRandomGroup"></u-button></view>-->
        <!--</view>-->
        <view class="list">
          <view class="item" v-for="(item, index) in groupList" :key="index">
            <view class="time">{{item.create_time}}</view>
            <view class="user" v-if="item.user">
              <view class="text">
                <u-avatar :src="getAvatar(item.user)" size="65" v-if="false"></u-avatar>
                <text class="name">{{item.user.nickname}}</text>
                发起了拼团({{group_total}}人团)
                <text class="diff" v-if="item.fans && group_total - item.fans.length > 0">
                  还差{{ group_total - item.fans.length }}人
                </text>
              </view>
            </view>
            <view class="fans" v-if="item.fans && item.fans.length >= 1">
              <u-avatar class="x" v-for="(o, i) in item.fans" :key="i" :src="getAvatar(o.user)" size="80"></u-avatar>
            </view>
            <view class="add">
              <view class="k"></view>
              <u-button text="参与此团" :custom-style="{ 'width': '80px', 'height': '30px' }" :color="activeColor" @click="handleJoinGroup(item.id)"></u-button>
            </view>
          </view>
        </view>
      </view>
      <!-- end group -->
      <view class="sku" v-if="haveSku" @click="openPop">
        <tag tag="规格" />
        <view class="value">
          <view class="sku-list">
            <view class="item" v-for="(item, index) in skuList" :key="index">
              {{ item }}
            </view>
          </view>
          <view class="select">
            <u-icon name="arrow-right" color="#333" size="24rpx"></u-icon>
          </view>
        </view>
      </view>
      <view class="freight">
        <tag tag="运费" />
        <view class="text" v-if="detail.freightText">{{detail.freightText}}</view>
        <view class="text" v-else>免运费</view>
      </view>
      <view class="area" v-if="detail.area && detail.area.name && false">
        <view class="name" @click="clickArea(detail.area)">
          {{detail.area.name.name}}
        </view>
      </view>
      <view class="content">
        <tag tag="详情" />
        <view class="video" v-if="detail.video">
          <view class="video-control" v-if="!showVide" @click="showVide = !showVide">
            <u-icon name="play-right-fill" size="60" color="#ffffff"></u-icon>
          </view>
          <video
            v-show="showVide"
            :src="baseUrl + detail.video.url"
            controls></video>
        </view>
        <view class="text" v-html="detail.inText" v-if="detail.inText"></view>
        <view class="image-list" v-if="detail.inImages && detail.inImages.length > 0">
          <view class="image" v-for="(item, index) in detail.inImages" :key="index">
            <u--image lazy-load width="100%" height="100%" :fade="true" duration="450" mode="widthFix" :src="baseUrl + item"></u--image>
          </view>
        </view>
      </view>
      <view class="footer">
        <view class="icon">
          <view class="home" @click="goHome">
            <u-icon name="home"></u-icon>
            <view class="text">首页</view>
          </view>
          <view class="fav" @click="runFav">
            <u-icon name="star" v-if="!isFav"></u-icon>
            <u-icon name="star-fill" v-else></u-icon>
            <view class="text">收藏</view>
          </view>
          <view class="cart" @click="goCart">
            <u-icon name="shopping-cart"></u-icon>
            <view class="text">
              购物车
              <view class="count" v-if="cartCounter > 0">
                <u-badge type="error" max="99" :value="cartDisplay"></u-badge>
              </view>
            </view>
          </view>
        </view>
        <view class="button">
          <template v-if="!detail.isGroup">
            <view class="cart more" @click="handleCart">
              <text class="t">加入购物车</text>
              <!--<text class="d">购买省:￥{{(detail.dis_myself * 1).toFixed(2)}}</text>-->
            </view>
            <view class="buy more" @click="handleBuy">
              <text class="t">立即购买</text>
              <!--<text class="d">分享赚:￥{{(detail.dis_referrer * 1).toFixed(2)}}</text>-->
            </view>
          </template>
          <template v-else>
            <!--<view class="cart" @click="handleRandomGroup">随机参团</view>-->
            <!--<view class="buy" @click="handleCreateGroup">发起拼团</view>-->
            <view class="cart more" @click="handleBuy">
              <text class="t">立即购买</text>
              <!--<text class="d">购买省:￥{{(detail.dis_myself * 1).toFixed(2).toString().replace(/\.?0+$/, '')}}</text>-->
            </view>
            <view class="buy more" @click="handleCreateGroup">
              <text class="t">发起拼团</text>
              <!--<text class="d">分享赚:￥{{(detail.dis_referrer * 1).toFixed(2).toString().replace(/\.?0+$/, '')}}</text>-->
            </view>
          </template>
        </view>
      </view>
    </template>
    <!-- pop sku -->
    <u-popup @touchmove.prevent :show="showPop" :round="10" :duration="200" mode="bottom"  @close="closePop" @open="openPop">
      <view class="pop">
        <view class="reset" @click="popReset">重新选择</view>
        <view class="main">
          <view class="image">
            <image :src="baseUrl + currentImage"></image>
          </view>
          <view class="text">
            <view class="stock">库存: {{ currentStock }}</view>
            <view class="price">价格: <text>￥{{ currentPrice }}</text></view>
            <view class="quantity">
              <view class="sub" @click="subQuantity">-</view>
              <view class="value"><input v-model.number="selectedQuantity" @input="changeQuantity" /></view>
              <view class="add" @click="addQuantity">+</view>
            </view>
          </view>
        </view>
        <view class="selected-result" v-if="selectedText.length > 0">
          <view class="item">
            您选择了:
            <text>{{ selectedText.join(', ') }}</text>
          </view>
          <view class="item">
            总数量: <text>{{ selectedQuantity }}</text>
            <!--总数量: <text>{{ realTotal }}</text>-->
            总金额: <text>￥{{ totalPrice }}</text>
            <!--总金额: <text>￥{{ realPrice }}</text>-->
          </view>
        </view>
        <view class="sku-list">
          <view class="item" v-for="(item, index) in detail.skuName" :key="index">
            <view class="name">{{ item.name }}</view>
            <view class="value">
              <template v-for="(o, i) in item.values">
                <view
                  :key="i"
                  class="value-item"
                  v-if="allSkuList && allSkuList.includes(o.id)"
                  @click="selectSkuValue(o)"
                  :class="{'active': o.selected, 'disable': o.disabled}"
                >
                  {{ o.value }}
                  <template v-if="o.value.indexOf('-') > 0">
                    <text class="total"> | {{o.value | skuTotal}}</text>
                  </template>
                </view>
              </template>
            </view>
          </view>
        </view>
        <view class="button" v-if="clickType > 0" @click="popSubmit">{{ popButtonText }}</view>
      </view>
    </u-popup>
    <u-back-top bottom="150" :scroll-top="scrollTop" icon="arrow-up" :customStyle="{'opacity': '0.88'}"></u-back-top>
  </view>
</template>

<script>
import color from '../../config/color'
import config from '../../config/config'
import base64 from '../../util/base64'
import Product from '../../api/product'
import Home from '../../api/home'
import Group from '../../api/group'
import Cart from '../../api/cart'
import Fav from '../../api/fav'
import Tag from './components/Tag'
const productModel = new Product()
const groupModel = new Group()
const cartModel = new Cart()
const favModel = new Fav()
const homeModel = new Home()
import { mapGetters } from 'vuex'

	export default {
    components: {
      Tag
    },
    onPageScroll(e) {
      this.scrollTop = e.scrollTop;
    },
    filters: {
      skuTotal(v) {
        let str = ''
        const list = v.split('-')
        if (list.length === 2) {
          const a = list[0].trim()
          const b = list[1].trim()
          str = +b - +a + 1
        }
        return str
      }
    },
    computed: {
      ...mapGetters({
        cartDisplay: 'Cart/showTotal',
        cartCounter: 'Cart/total',
      }),
      // 判断是否存在sku
      haveSku() {
        // sku 是设置的值， skuName是规格名称
        // console.log(this.detail.sku, this.detail.skuName)
        return this.detail.sku && this.detail.sku.length > 0
            && this.detail.skuName && this.detail.skuName.length > 0
      },
      // sku列表
      skuList() {
        return this.detail.skuName && this.detail.skuName.length > 0 ? this.detail.skuName.map(x => x.name) : []
      },
      // pop 按钮文字内容
      popButtonText() {
        let text = ''
        switch (this.clickType) {
          case 1:
            text = '添加到购物车'
            break
          case 2:
            text = '立即购买'
            break
          case 3:
            text = '发起拼团'
            break
          case 4:
            text = '参与此团'
            break
          case 5:
            text = '随机拼团'
            break
          default:
            text = ''
        }
        return text
      },
      allSkuList() {
        let list = []
        if (this.detail.sku && this.detail.sku.length > 0) {
          list = this.detail.sku.map(x => x.sku_values)
          const x = list.reduce((previous, current) => {
            return previous.concat(current)
          })
          // 把x转成int, 因为api传回来的是数字
          return x.map(x => +x)
        }
      },
      currentPrice() {
        let price = this.clickType === 3 || this.clickType === 4 ? this.detail.price_group : this.detail.price
        if (this.selectedList.length > 0) {
          // price = this.whichSku.price
          console.log(this.whichSku)
          price = this.clickType === 3 || this.clickType === 4 ? this.whichSku.price_group : this.whichSku.price
        }
        return price
      },
      currentStock() {
        let stock = this.detail.stock
        if (this.selectedList.length > 0) {
          stock = this.whichSku.stock
        }
        return stock
      },
      currentImage() {
        let image = ''
        if (this.detail.mainImage) {
          image = this.detail.mainImage.thumbnail_path
        }
        if (this.selectedList.length > 0) {
          if (this.whichSku && this.whichSku.image) {
            image = this.whichSku.image.thumbnail_path
          }
        }
        return image
      },
      totalPrice() {
        return (this.currentPrice * this.selectedQuantity).toFixed(2)
      },
      // 处理码段价格与数量
      // realTotal() {
      //   return this.selectedQuantity * this.realSelectedQuantity
      // },
      // realPrice() {
      //   return this.currentPrice * this.realTotal
      // }
    },
    watch: {
      // 监听选中的sku, 处理对应的sku
      selectedSku: {
        deep: true,
        handler(v) {
          // 这里是不太严格的, 为了对应老版sku(残缺的), 一样可以
          this.whichSku = v[0]
          // console.log(v[0])
        }
      }
    },
		data() {
			return {
        activeColor: color.main_color,
			  // 视频遮挡问题
			  showVide: false,
        scrollTop: 0,
			  baseUrl: config.baseUrl,
				id: 0,
        detail: {},
        isFav: false,
        showPop: false,
        // 点击类型标识
        clickType: 1,
        // sku选择
        selectedList: [],
        selectedText: [],
        selectedSku: [],
        whichSku: {},
        selectedQuantity: 1,
        // 下单参数
        options: {},
        // 真实数量
        realSelectedQuantity: 1,
        // 拼团
        group_total: 10,
        groupList: [],
        fansList: [],
        group_id: 0,
        select_group_id: 0,
        quantity: 1
			}
		},
    // 分享
    onShareAppMessage(res) {
      return {
        // title: '快递熊小二',
        // path: '/pages/index/index?scene=' +
        path: '/sub_product/detail/index?id='+this.id+'&scene=' +
            (this.$store.getters['User/info'] ? this.$store.getters['User/info'].id : 0),
        // 这里还可以定义图片
        // imageUrl: '',
      }
    },
		onLoad(options) {
      // 分享
      /*#ifdef MP-WEIXIN*/
      // 微信小程序端执行的逻辑
      uni.showShareMenu({
        menus: ['shareAppMessage', 'shareTimeline'],
        success: res => {

        }
      })
      /*#endif*/
      this.id = options.id
      // 拼团id
      // this.group_id = options.group_id || 0

      if (options.scene && (options.scene > 0 || options.scene.length > 0)) {
        console.log('detail -- referrer', options.scene)
        // todo 商品分享
        homeModel.setReferrer(options.scene)
      }
		},
    onShow() {
      this.fetchData()
      this.getCartTotal()
      // 拼团
      // this.getGroupList()
      // if (+this.group_id > 0) {
      //   this.getFansList()
      // }
    },
		methods: {
      decrement() {
        if (this.quantity > 1) {
          this.quantity--
          this.$emit('changeQuantity', this.quantity)
        }
      },
      increment() {
        if (this.quantity < this.detail.stock) {
          // console.log(this.detail.stock)
          this.quantity++
          this.$emit('changeQuantity', this.quantity)
        }
      },
      change() {
        uni.showModal({
          title: '请输入数量',
          content: '' + this.quantity,
          editable: true,
          confirmText: '确认',
          cancelText: '取消',
          success: res => {
            if (res.confirm) {
              // this.quantity = res.content
              const q = res.content
              if (q === undefined || isNaN(+q)) {
                return uni.showToast({
                  icon: 'none',
                  title: '请输入正确的数量'
                })
              }
              if (q <= this.detail.stock && q > 0) {
                this.quantity = q
              } else {
                return uni.showToast({
                  icon: 'none',
                  title: '库存不足'
                })
              }
            }
          }
        })
      },
      //拼团
      getAvatar(user) {
        if (!user) {
          return ''
        }
        return +user.av === 0 ? user.avatar : config.baseUrl + user.avatar
      },
      getGroupList() {
        groupModel.getGroupList({ product_id: this.id }).then(response => {
          let { data } = response
          data = base64.parse(data)
          // console.log(data)
          this.groupList = data.list
          this.group_total = data.quantity
        })
      },
      // getFansList(group_id) {
      //
      // },
      // goGroup(group_id) {
      //   uni.navigateTo({
      //     url: `/sub_product/detail/index?id=${this.detail.id}&group_id=${group_id}`
      //   })
      // },
      fetchData() {
        productModel.detail({ id: this.id }).then(response => {
          let { data } = response
          data = base64.parse(data)
          this.detail = data
          uni.setNavigationBarTitle({
            title: data.title
          })
          // console.log(data)
          // 检查是否收藏
          this.checkFav()
        })
      },
      clickArea(area) {
        uni.navigateTo({
          url: `/sub_product/area/index?id=${area.area_id}`
        })
      },
      goHome() {
        uni.switchTab({
          url: '/pages/index/index'
        })
      },
      goCart() {
        uni.switchTab({
          url: '/pages/cart/index'
        })
      },
      // 购物车数量
      getCartTotal() {
        this._isLogin().then(() => {
          cartModel.total().then(response => {
            let { data } = response
            data = base64.parse(data)
            this.$store.dispatch('Cart/set_change_list', data)
            // uni.setTabBarBadge({
            //   index: 2,
            //   text: this.$store.getters['Cart/showTotal']
            // })
          })
        }).catch(() => {
          // console.log('未登录')
        })
      },
      // 检查是否收藏
      checkFav() {
        this._isLogin().then(() => {
          favModel.checkFavorite({ id: this.id }).then(response => {
            let { data } = response
            data = base64.parse(data)
            this.isFav = !!data.is
          })
        }).catch(() => {
          // console.log('未登录')
        })
      },
      // 收藏操作
      runFav() {
        this._isLogin().then(() => {
          if (!this.isFav) {
            favModel.addFavorite({ id: this.id }).then(() => {
              this.isFav = true
              uni.showToast({
                icon: 'none',
                title: '收藏成功'
              })
            })
          } else {
            favModel.removeFavorite({ id: this.id }).then(() => {
              this.isFav = false
              uni.showToast({
                icon: 'none',
                title: '取消成功'
              })
            })
          }
        }).catch(() => {
          // 未登录
          this.isFav = !this.isFav
        })
      },
      // 判断登录
      _isLogin() {
        return new Promise((resolve, reject) => {
          const token = this.$store.getters['User/token']
          if (!token) {
            reject()
          } else {
            favModel.isLogin({ token }).then(response => {
              let { data } = response
              data = base64.parse(data)
              if (data.isLogin) {
                resolve()
              } else {
                // 没有登录
                reject()
              }
            })
          }
        })
      },
      // pop
      openPop() {
        this.showPop = true
      },
      closePop() {
        this.showPop = false
      },
      handleCart() {
        if (this.haveSku) {
          this.clickType = 1
          this.openPop()
        } else {
          this.addCart()
        }
      },
      handleBuy() {
        if (this.haveSku) {
          this.clickType = 2
          this.openPop()
        } else {
          this.buy()
        }
      },
      handleCreateGroup() {
        if (this.haveSku) {
          this.clickType = 3
          this.openPop()
        } else {
          this.createGroup()
        }
      },
      handleRandomGroup() {
        if (this.haveSku) {
          this.clickType = 5
          this.openPop()
        } else {
          this.randomGroup()
        }
      },
      handleJoinGroup(group_id) {
        this.select_group_id = group_id
        if (this.haveSku) {
          this.clickType = 4
          this.openPop()
        } else {
          this.joinGroup()
        }
      },
      createGroup() {
        this.$store.dispatch('Order/set_params', this.handleOptions()).then(() => {
          const options = this.handleOptions(true)
          options.create_group = true
          const params = base64.encodeUrl(options)
          uni.navigateTo({
            url: `/sub_main/order/index?params=${params}`
          })
        })
      },
      randomGroup() {
        this.$store.dispatch('Order/set_params', this.handleOptions()).then(() => {
          const options = this.handleOptions(true)
          options.random_group = true
          const params = base64.encodeUrl(options)
          uni.navigateTo({
            url: `/sub_main/order/index?params=${params}`
          })
        })
      },
      joinGroup() {
        this.$store.dispatch('Order/set_params', this.handleOptions()).then(() => {
          const options = this.handleOptions(true)
          options.join_group = true
          options.group_id = this.select_group_id
          console.log(options)
          // return
          const params = base64.encodeUrl(options)
          uni.navigateTo({
            url: `/sub_main/order/index?params=${params}`
          })
        })
      },
      addCart() {
        cartModel.addCart({
          ...this.handleOptions()
        }).then(() => {
          uni.showToast({
            title: '添加成功',
            icon: 'success'
          })
          setTimeout(() => {
            uni.switchTab({
              url: '/pages/cart/index'
            })
          }, 500)
        })
      },
      buy() {
        // 检测条件
        cartModel.checkRepeat({ id: this.id }).then(() => {
          // 保存参数到store
          this.$store.dispatch('Order/set_params', this.handleOptions()).then(() => {
            const params = base64.encodeUrl(this.handleOptions())
            uni.navigateTo({
              url: `/sub_main/order/index?params=${params}`
            })
          })
        })
      },
      // sku 值选择
      _selectedValues(appendText = false) {
        const list = []
        this.detail.skuName.forEach(x => {
          x.values.forEach(y => {
            if (y.selected) {
              if (appendText) {
                list.push({ id: y.id, text: y.value })
              } else {
                list.push(y.id)
              }
            }
          })
        })
        return list
      },
      // sku 选择
      selectSkuValue(o) {
        if (o.disabled && this.detail.skuName.length > 1) {
          return
        }
        // 1. [ 名称索引, 选中否 ]
        let skuNameIndex, selected
        this.detail.skuName.forEach((x, index) => {
          x.values.forEach(y => {
            if (+y.id === o.id) {
              this.$set(o, 'selected', !o.selected)
              skuNameIndex = index
              selected = o.selected
            }
          })
        })
        // console.log(this.detail.skuName, skuNameIndex, selected)
        // 2. [ 同名称下的值, 取消选中 ]
        if (skuNameIndex !== undefined) {
          this.detail.skuName[skuNameIndex].values.forEach(x => {
            if (selected && +x.id !== o.id) {
              this.$set(x, 'selected', undefined)
            }
          })
        }
        // 3. admin set
        const selectedValues = this._selectedValues(true)
        const list = this.detail.sku.filter(x => selectedValues.every(y => x.sku_values.includes(y.id + '')))
        // 保存选中的值
        this.selectedSku = list
        const listValues = []
        list.forEach(x => {
          x.sku_values.forEach(y => {
            listValues.push(y)
          })
        })
        this.detail.skuName.forEach(x => {
          x.values.forEach(y => {
            if (!listValues.includes(y.id + '')) {
              this.$set(y, 'disabled', true)
            } else {
              this.$set(y, 'disabled', undefined)
            }
          })
        })
        // 4 selected display
        this.selectedText = selectedValues.map(x => x.text)
        this.selectedList = selectedValues.map(x => x.id)
        // console.log(this.selectedList, this.selectedText, this.detail)
        // 处理码段数量
        // this.selectedText.forEach(x => {
        //   if (x.indexOf('-') > 0) {
        //     const n = x.split('-')
        //     const a = +n[0].trim()
        //     const b = +n[1].trim()
        //     this.realSelectedQuantity = b - a + 1
        //   }
        // })
      },
      subQuantity() {
        if (this.selectedQuantity > 1) {
          this.selectedQuantity--
        }
      },
      addQuantity() {
        if (this.selectedQuantity < this.currentStock) {
          this.selectedQuantity++
        }
      },
      popReset() {
        this.selectedQuantity = 1
        this.selectedList = []
        this.selectedText = []
        this.detail.skuName.forEach(x => {
          x.values.forEach(y => {
            this.$set(y, 'selected', undefined)
            this.$set(y, 'disabled', undefined)
          })
        })
      },
      changeQuantity() {
        if (isNaN(this.selectedQuantity) || +this.selectedQuantity < 1) {
          this.selectedQuantity = 1
        }
      },
      popSubmit() {
        if (this.selectedList.length < 1) {
          return uni.showToast({
            icon: 'none',
            title: '请选择规格'
          })
        }
        // 规格选择完整
        if (this.selectedList.length < this.detail.skuName.length) {
          return uni.showToast({
            icon: 'none',
            title: '规格请选择完成'
          })
        }
        if (isNaN(this.selectedQuantity)) {
          return uni.showToast({
            icon: 'none',
            title: '库存错误'
          })
        }
        if (this.selectedQuantity > this.currentStock) {
          return uni.showToast({
            icon: 'none',
            title: '库存不足'
          })
        }
        this.showPop = false
        const options = {
          quantity: this.selectedQuantity,
          // quantity: this.realTotal,
          price: this.currentPrice,
          product_sku_id: this.whichSku.id,
          selected_sku_value: this.selectedList,
          selected_sku_text: this.selectedText
          // selected_sku_text: encodeURI(base64.encode(this.selectedText))
        }
        // console.log(base64.encode(this.selectedText))
        this.options = options
        // console.log(this.clickType)
        if (this.clickType === 1) {
          this.addCart()
        }
        if (this.clickType === 2) {
          this.buy()
        }
        if (this.clickType === 3) {
          this.createGroup()
        }
        if (this.clickType === 4) {
          this.joinGroup()
        }
        if (this.clickType === 5) {
          this.randomGroup()
        }
      },
      // 下单参数处理
      handleOptions(is_group = false) {
        const isEmpty = Object.keys(this.options).length === 0
        if (isEmpty) {
          return {
            price: !is_group ? this.detail.price:
                // (this.detail.price * (1 - this.detail.price_group / 100)).toFixed(2),
                this.detail.price_group,
            product_id: this.id,
            // quantity: 1
            quantity: this.quantity
          }
        }
        // 拼团sku价格也优惠
        if (is_group && this.options.price) {
          // this.options.price = (this.options.price * (1 - this.detail.price_group / 100)).toFixed(2)
          this.options.price = this.detail.price_group
        }
        return {
          ...this.options,
          product_id: this.id,
        }
      }
		}
	}
</script>

<style lang="scss" scoped>
// 后面加的数量
$size: 44rpx;
$button: $size + 10rpx;
.quantityx {
  padding: 20rpx 0;
  display: flex;
  text-align: center;
  align-items: center;
  .titlex {
    display: inline-block;
    margin-right: 20rpx;
    font-size: 24rpx;
    font-weight: normal;
  }
  .sub, .num, .add {
    border: 1rpx solid #dcdcdc;
    min-width: $size;
    height: $size;
    line-height: $size;
    &.num {
      width: 80rpx;
    }
    &.sub, &.add {
      min-width: $button;
      font-weight: 700;
    }
    &.sub {
      border-right: none;
      border-top-left-radius: 20rpx;
      border-bottom-left-radius: 20rpx;
    }
    &.add {
      border-left: none;
      border-top-right-radius: 20rpx;
      border-bottom-right-radius: 20rpx;
    }
  }
}

$swiper_height: 710rpx;
.group {
  margin: 20rpx 0;
  border-radius: 10rpx;
  background: white;
  padding: 20rpx;
  //font-size: 24rpx;
  .title {
    height: 30px;
    line-height: 30px;
    display: flex;
    align-items: center;
    font-size: 28rpx;
    justify-content: start;
    color: $main_color;
    font-weight: 700;
  }
  .list {
    //margin: 20px 0;
    .item {
      background: #f9f9f9;
      margin-bottom: 10px;
      padding: 20rpx;
      border-radius: 10rpx;
      .time {
        color: #cccccc;
      }
      .text {
        height: 50px;
        display: flex;
        align-items: center;
        .name {
          margin-right: 20rpx;
          //margin-left: 20rpx;
          color: red;
          font-weight: 700;
        }
        .diff {
          color: red;
          margin-left: 20rpx;
        }
      }
      .fans {
        display: flex;
        flex-wrap: wrap;
        padding-bottom: 20rpx;
        .x {
          margin-left: 20rpx;
        }
      }
      .add {
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
        .k {
          flex: 1;
        }
      }
    }
  }
  //.btn {
  //  display: flex;
  //  .item {
  //    margin-right: 10px;
  //  }
  //}
}
.wrapper {
  padding: 20rpx 20rpx 110rpx 20rpx;
  background: $background_color;
  .swiper {
    height: $swiper_height;
    background: white;
    .image {
      //background: red;
      height: $swiper_height;
      border-radius: 10rpx;
      overflow: hidden;
      //display: flex;
      //align-items: center;
      image {
        width: 100%;
        height: 100%;
        display: block;
        margin: auto;
      }
    }
  }
  .desc {
    margin: 20rpx 0;
    padding: 20rpx;
    background: white;
    color: $main_text_color;
    border-radius: 10rpx;
    view {
      line-height: 44rpx;
      //font-size: 24rpx;
      &.g {
        display: flex;
        align-items: center;
        .price {
          margin-right: 10px;
        }
        .price_buy {
          font-weight: 32rpx;
          background: #f3f5f7;
          padding: 0 20rpx;
        }
      }
      &.title {
        font-size: 32rpx;
        font-weight: 700;
      }
      &.title_sub {
        color: $second_text_color;
      }
      &.price {
        font-size: 32rpx;
        font-weight: 700;
        color: red;
        line-height: 60rpx;
        display: inline-block;
      }
      &.price_old {
        font-size: 32rpx;
        color: $second_text_color;
        text-decoration: line-through;
        display: inline-block;
        margin-left: 20rpx;
      }
      &.stock {
        font-size: 28rpx;
      }
      &.sell {
        color: #ccc;
      }
    }
  }
  .sku {
    //font-size: 24rpx;
    margin: 20rpx 0;
    padding: 20rpx;
    background: white;
    border-radius: 10rpx;
    .value {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .select {
        width: 24rpx;
      }
      .sku-list {
        flex: 1;
        //background: red;
        .item {
          display: inline-block;
          margin-right: 10px;
          background: $main_color;
          color: white;
          padding: 2px 4px;
          //font-size: 20rpx;
        }
      }
    }
  }
  .freight {
    //font-size: 24rpx;
    margin: 20rpx 0;
    padding: 20rpx;
    background: white;
    border-radius: 10rpx;
  }
  .area {
    margin: 20rpx 0;
    padding: 30rpx;
    background: white;
    border-radius: 10rpx;
    text-align: center;
    color: red;
    font-size: 32rpx;
    font-weight: 700;
  }
  .content {
    //font-size: 24rpx;
    margin: 20rpx 0;
    padding: 20rpx;
    background: white;
    border-radius: 10rpx;
    .text {
      line-height: 1.2em;
      margin: 20rpx 0;
    }
    ::v-deep {
      image {
        width: 100%;
      }
    }
    .video-control {
      width: 100%;
      height: 200px;
      background: black;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .video {
      //background: red;
      video {
        width: 100%;
      }
    }
  }
  .footer {
    position: fixed;
    width: 100%;
    height: 110rpx;
    left: 0;
    bottom: 0;
    display: flex;
    background: white;
    padding: 15rpx 40rpx;
    box-sizing: border-box;
    border-top: 1rpx solid #f3f3f3;
    z-index: 9999;
    .icon {
      flex: 1;
      display: flex;
      justify-content: space-between;
      padding: 10rpx 30rpx;
      view {
        color: $second_text_color;
        font-size: 24rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        &.cart {
          //background: red;
          .text {
            position: relative;
            .count {
              position: absolute;
              top: -35rpx;
              right: -15rpx;
            }
          }
        }
      }
    }
    .button {
      flex: 1.89;
      display: flex;
      padding-top: 5rpx;
      view {
        flex: 1;
        //height: 70rpx;
        //line-height: 70rpx;
        font-size: 28rpx;
        box-sizing: border-box;
        letter-spacing: 2rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        &.cart {
          border: 1rpx solid $main_color;
          color: $main_color;
          border-top-left-radius: 30rpx;
          border-bottom-left-radius: 30rpx;
          text-align: center;
        }
        &.buy {
          background: $main_color;
          color: white;
          border-top-right-radius: 30rpx;
          border-bottom-right-radius: 30rpx;
          text-align: center;
        }
        &.more {
          overflow: hidden;
          letter-spacing: 0;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          .t {
          }
          .d {
            font-size: 24rpx;
            //color: black;
          }
        }
      }
    }
  }
  // pop
  .pop {
    height: 400px;
    padding: 20rpx 20rpx 70rpx 20rpx;
    position: relative;
    overflow-y: auto;
    .reset {
      position: absolute;
      right: 10px;
      top: 10px;
      background: $main_color;
      padding: 15rpx 30rpx;
      border-radius: 5px;
      color: white;
      font-weight: 700;
      //font-size: 24rpx;
    }
    .button {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      height: 50px;
      line-height: 50px;
      text-align: center;
      background: $main_color;
      color: white;
      font-size: 30rpx;
      font-weight: 700;
    }
    .main {
      display: flex;
      align-items: center;
      .image {
        width: 200rpx;
        height: 200rpx;
        //background: red;
        overflow: hidden;
        image {
          width: 100%;
          height: 100%;
        }
      }
      .text {
        height: 200rpx;
        //background: red;
        margin-left: 20rpx;
        padding: 0;
        flex: 1;
        //font-size: 24rpx;
        flex-direction: column;
        display: flex;
        justify-content: space-around;
        .price, .stock, .quantity {
          //height: 65rpx;
          //line-height: 65rpx;
          //background: blue;
        }
        .price {
          text {
            color: red;
            font-weight: 700;
            //font-size: 30rpx;
          }
        }
        .quantity {
          display: flex;
          align-items: center;
          justify-content: start;
          .add, .sub, .value {
            display: inline-block;
            padding: 7.5px 10px;
            font-size: 16px;
            border-radius: 5px;
          }
          .value {
            width: 50px;
            padding: 7.5px 20px;
            background: $background_color;
            color: red;
          }
        }
      }
    }
    .sku-list {
      //background: red;
      min-height: 200px;
      margin-top: 10px;
      margin-bottom: 20px;
      .item {
        margin-bottom: 5px;
        .name {
          font-size: 28rpx;
          font-weight: 700;
        }
        .value {
          margin-top: 5px;
          .value-item {
            display: inline-block;
            background: #ccc;
            margin-right: 15px;
            margin-bottom: 15px;
            padding: 7.5px 15px;
            border-radius: 5px;
            //font-size: 24rpx;
            &.active {
              background: $main_color;
            }
            &.disable {
              background: #eee;
            }
            .total {
              margin-left: 5rpx;
            }
          }
        }
      }
    }
    .selected-result {
      margin: 10rpx 0;
      //font-size: 24rpx;
      text {
        color: red;
      }
    }
  }
}
</style>
